<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="null">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">基本信息:</td>
        <td>
          <p style="float: left;">
            车牌号：<span id="plateNo">
              {{ result.plateNo }}
            </span><br>

            停车场名称：<span id="parkName">
              {{ result.parkName }}
            </span><br>

            停车场编号：<span id="parkCode">
              {{ result.parkCode }}
            </span><br>

            停车场位编号：<span id="parkNumber">
              {{ result.parkNumber }}
            </span><br>

            起始时间：<span id="startTime">
              {{ result.startTime }}
            </span><br>

            过期时间：<span id="endTime">
              {{ result.endTime }}
            </span><br>

            支付费用(单位：元）：<span id="payFee">
              {{ result.payFee/100 }}
            </span><br>

            修改时间：<span id="updateTime">
              {{ result.updateTime }}
            </span><br>

            创建人：<span id="createUser">
              {{ result.createUser }}
            </span><br>

            创建时间：<span id="createTime">
              {{ result.createTime }}
            </span><br>
          </p>
        </td>
      </tr>

      <tr>
        <td style="width:90px;text-align: right;padding-top: 60px;">详情:</td>
        <td>
          <p style="float: left;">
            客户姓名：<span id="userName">
              {{ result.userName }}
            </span><br>

            客户手机号码：<span id="mobile">
              {{ result.mobile }}
            </span><br>
            家庭住址：<span id="address">
              {{ result.address }}
            </span><br>
            车辆备注：<span id="remark">
              {{ result.remark }}
            </span><br>
          </p>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button type="primary" @click="close">关闭</a-button>
        </td>
      </tr>
    </table>

  </a-modal>
</template>

<script>
import {httpAction, postAction} from '@/api/manage'

export default {
  name: "ParkWhiteListModalDetail",
  data () {
    return {
      title:"操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      result: {

      },
      carTypeInfo:{},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules:{
      },
      url: {
        add: "/parkCar/parkCarMonthly/add",
        edit: "/parkCar/parkCarMonthly/edit",
        carTypeInfo: "/parkCar/parkCarMonthly/carTypeInfo",
      },
    }
  },
  created () {
  },
  methods: {
    add () {
      this. edit({});
    },
    edit (record) {
      Object.assign(this.result, record);
      this.initDepart();
      this.visible = true;
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    initDepart() {
      postAction(this.url.carTypeInfo, {"carTypeId":this.result.carTypeId}).then((res) => {
        if (res.success) {
          this.carTypeInfo = res.result;
        }
        if (res.code === 510) {
         return this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    handleOk () {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          httpAction(httpurl,formData,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
  }
}
</script>

<style lang="less" scoped>

</style>
